<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorate="~{base_layout}" lang="zh">
<head>
    <title>layout</title>
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>
    <!-- mdc 部分组件未实现,该部分使用老版本 -->
    <!--    <link rel="stylesheet" href="/libs/material-design-light/material.css"/>-->
    <!--    <script type="text/javascript" src="/libs/material-design-light/material.js"></script>-->
    <!-- mdc -->
    <script src="/libs/material-components-web/material-components-web.min.js"></script>
    <script src="/script/utils/common-util.js"></script>
    <script src="/script/utils/mdc-component-helper.js"></script>
    <link href="/libs/material-components-web/material-components-web.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/libs/material-components-web/material-icons.css">
    <link rel="stylesheet" href="/style/manage/layout.css">
</head>
<body class="container" layout:fragment="container">
<header class="mdc-top-app-bar app-bar mdc-top-app-bar--dense header" id="app-bar">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
            <span class="mdc-top-app-bar__title data-href__auto pointer"
                  data-href="/manage/index"
                  id="sysName">xxx管理系统</span>
        </section>
    </div>
</header>
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust mdc-drawer--open">
    <div class="mdc-drawer__content mdc-tree" id="menuContainer">

    </div>
</aside>
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
    <main class="main-content" id="main-content" layout:fragment="main-container"></main>
</div>

</body>
<th:block layout:fragment="common-script">
    <script type="text/javascript" th:inline="javascript">
      $(function() {
        // 自动注册 data-mdc-auto-init 元素
        mdc.autoInit();
        // 菜单隐藏/显示
        const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
        const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('app-bar'));
        topAppBar.setScrollTarget(document.getElementById('main-content'));
        topAppBar.listen('MDCTopAppBar:nav', () => {
          drawer.open = !drawer.open;
        });

        console.log(' menus: ', [[${menus}]]);

        let mdcTree = $('#menuContainer').mdcTree({
          data: [[${menuLists}]],
          id: 'id',
          parentId: 'parentId',
          label: 'name',
          icon: 'icon',
          expandAll: false,
          checkbox: false,
          externalProp: {
            'data-href': 'url',
          },
          toggleEvt: function(cell) {
            let selectItemId = cell.dataset.id;
            console.log($.strFormat(' 点击元素: {}', selectItemId));
          },
        });

        // 菜单折叠
        $('aside.mdc-drawer').collapse();

        // 保持select与父元素同宽
        // 侧边栏自动收缩
        let clientWidth = document.body.clientWidth;
        if (clientWidth > 1320 && !drawer.open) {
          drawer.open = true;
        }
        if (clientWidth < 1320 && drawer.open) {
          drawer.open = false;
        }
        window.onresize = function() {
          let clientWidthLive = document.body.clientWidth;
          if (clientWidth !== clientWidthLive) {
            clientWidth = clientWidthLive;
            console.log(' log: ' + '宽度更新', clientWidthLive);
            $.fixSelectWidth();
            if (clientWidthLive > 1320 && !drawer.open) {
              drawer.open = true;
            }
            if (clientWidthLive < 1320 && drawer.open) {
              drawer.open = false;
            }
          }
        };

        $.fixSelectWidth();

        // 添加ripple效果
        // new mdc.list.MDCList(document.querySelector('.mdc-list')).listElements.map(
        //     (listItemEl) => new mdc.ripple.MDCRipple(listItemEl));

        // 链接跳转
        $('aside').on('click', 'h3[data-href]', function() {
          $.trim(this.dataset.href) && (window.location.href = this.dataset.href);
        });
        // 菜单高亮
        let url = location.pathname;
        // $('aside.mdc-drawer').find('h3[data-href="' + url + '"]').parent('div').addClass('active');
        mdcTree.check($('aside.mdc-drawer').find('h3[data-href="' + url + '"]').get(0).dataset.id, false);

        // 元素回车事件绑定
        $('[data-enter-trigger]').on('keypress', function(e) {
          if (e.key === 'Enter') {
            eval($(this).attr('data-enter-trigger') + '()');
          }
        });
        // 包含该class属性的元素,注册点击跳转
        $('body').on('click', '.data-href__auto[data-href]', function() {
          $.trim(this.dataset.href) && (window.location.href = this.dataset.href);
        });
      });
    </script>
    <th:block layout:fragment="script">

    </th:block>
</th:block>
</html>
